<template>
	<nav-bar></nav-bar>
	<view class="home-container" :style="{paddingTop: $store.state.navBarHeight + 'px'}">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" circular :duration="1000">
			<swiper-item v-for="banner in banners" :key="banner.id">
				<image :src="banner.picUrl" mode="scaleToFill"></image>
			</swiper-item>
		</swiper>
		<!-- 宫格导航 -->
		<uni-grid :column="4">
			<uni-grid-item v-for="cate in cates" :key="cate.id">
				<view class="grid" @tap="enterLists(cate.id)">
					<image :src="cate.icon" mode="scaleToFill"></image>
					<text class="grid-name">{{cate.name}}</text>
				</view>
			</uni-grid-item>

		</uni-grid>
		<!-- /宫格导航 -->
		<!-- 商品列表 -->
		<view class="items-container">
			<view class="items">
				<navigator :url="'/pages/detail/detail?id='+item.id" v-for="item in items" :key="item.id">
					<view class="item">
						<image :src="item.pic" mode="scaleToFill"></image>
						<view class="item-info">
							<text class="item-name">商品名:{{item.name}}</text>
							<text class="price">商品价格:￥{{item.minPrice}}</text>
						</view>
					</view>
				</navigator>
			</view>
		</view>
		<!-- /商品列表 -->
	</view>
	<button type="default" @tap="handleRefresh" v-show="refreshBtnStatus" class="refresh">点击下拉刷新</button>
</template>

<script>
	export default {
		data() {
			return {
				banners: [],
				cates: [],
				items: [],
				page: 1,
				loading: false, // 是否处于加载下一页loading状态
				hasMore: true,
				refreshBtnStatus: false
			};
		},
		methods: {
			enterLists(cateId){
				// 跳转到列表页
				uni.navigateTo({
					url: "/pages/lists/lists?cateId="+cateId
				})
			},
			handleRefresh(){
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 20
				})
				// 点击一键下拉刷新
				uni.startPullDownRefresh();
			},
			fetchBanners() {
				this.$request('/banner/list').then(res => {
					if (res.code === 0) {
						this.banners = res.data
					}
				})
			},
			fetchCates() {
				this.$request('/shop/goods/category/all').then(res => {
					if (res.code === 0) {
						this.cates = res.data
					}
				})
			},
			fetchItems() {
				this.loading = true;
				this.$request('/shop/goods/list/v2', {
					method: 'POST',
					data: {
						page: this.page,
						pageSize: 5
					}
				}).then(res => {
					uni.stopPullDownRefresh();
					this.loading = false; 
					if (res.code === 0) {
						this.items = [...this.items, ...res.data.result]
					}
					if (res.code === 700) {
						this.hasMore = false;
					}
				})
			}
		},
		onLoad() {
			this.fetchBanners();
			this.fetchCates();
			this.fetchItems();
		},
		onReachBottom(){
			if (this.loading || !this.hasMore) {
				return false;
			}
			// 触底事件
			this.page++;
			this.fetchItems()
			
		},
		onPullDownRefresh(){
			// 下拉刷新
			this.items = [];
			this.page = 1;
			this.hasMore = true;
			this.fetchItems()
		},
		onPageScroll({scrollTop}) {
			if (scrollTop>400) {
				this.refreshBtnStatus = true;
			} else {
				this.refreshBtnStatus = false;
			}
		}
	}
</script>

<style lang="scss">
	.home-container {
		swiper {
			width: 750rpx;
			height: 375rpx;

			image {
				width: 750rpx;
				height: 375rpx;
			}
		}

		.grid {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			image {
				width: 50%;
				height: 50%;
			}

			.grid-name {
				color: #333;
				font-size: 14px;
			}
		}
		.item{
			display: flex;
			align-items: center;
			.item-info{
				flex: 1;
			}
			image{
				width: 160rpx;
				height: 160rpx;
			}
		}
	}
	.refresh{
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 10;
	}
</style>